<%--
  Created by IntelliJ IDEA.
  User: jamesmarva
  Date: 11/09/2017
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
    <title>病人电子病历调阅</title>
    <link type="text/css" href="${ctxStatic}infirmary/css/bootstrap.css" rel="stylesheet">
    <link type="text/css" href="${ctxStatic}infirmary/css/popuo-box.css" rel="stylesheet">
    <link type="text/css" href="${ctxStatic}infirmary/css/style.css" rel="stylesheet">
    <link href="${ctxStatic}infirmary/css/jquery-ui.css" rel="stylesheet"  />
    <link type="text/css"  href="${ctxStatic}infirmary/css/animate.css" rel="stylesheet"  media="all">

    <script type="text/javascript" src="${ctxStatic}infirmary/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}infirmary/js/numscroller-1.0.js"></script>
    <script src="${ctxStatic}infirmary/js/wow.min.js"></script>
</head>
<body>
<!-- header -->
<div class="header wow zoomIn">
    <div class="container">
        <div class="header_left" data-wow-duration="2s" data-wow-delay="0.5s">
            <ul>
                <li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+123 456 7890</li>
                <li><a href="mailto:info@example.com"><span class="glyphicon glyphicon-envelope" aria-hidden="true">
                    </span>info@example.com</a>
                </li>
            </ul>
        </div>
        <div class="header_right">
            <div class="login">
                <ul>
                    <li><a href="#" data-toggle="modal" data-target="#myModal4"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>Login</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal5"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>Signup</a></li>

                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- //header -->

<!-- services -->
<div class="services">
    <div class="container">
        <div class="col-md-4 services_left wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0s">
            <h3>Our Best Services</h3>
            <p class="ser-para" >Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
            <a href="about.html" class="hvr-outline-out button2">See More About Us</a>
            <script>
                // You can also use "$(window).load(function() {"
                $(function () {
                    // Slideshow 4
                    $("#slider4").responsiveSlides({
                        auto: true,
                        pager: true,
                        nav: false,
                        speed: 500,
                        namespace: "callbacks",
                        before: function () {
                            $('.events').append("<li>before event fired.</li>");
                        },
                        after: function () {
                            $('.events').append("<li>after event fired.</li>");
                        }
                    });
                });
            </script>
            <div  class="callbacks_container">
                <ul class="rslides" id="slider4">
                    <li>
                        <div class="ser-bottom">
                            <h5>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                                sed quia consequuntur magni dolores eos qui </h5>
                            <p>- Alia Smith</p>
                        </div>
                    </li>
                    <li>
                        <div class="ser-bottom">
                            <h5>Voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores
                                eos qui ratione voluptatem sequi nesciunt</h5>
                            <p>- Thompson</p>
                        </div>
                    </li>
                    <li>
                        <div class="ser-bottom">
                            <h5>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                                sed quia consequuntur magni dolores eos qui </h5>
                            <p>- Federic</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-8 services_right ">
            <div class="list-left text-center wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0.1s">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                <h4>Voluptatem</h4>
                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                    sed quia consequuntur magni dolores eos qui</p>
            </div>
            <div class="list-left text-center wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0.2s">
                <span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>
                <h4>Voluptatem</h4>
                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                    sed quia consequuntur magni dolores eos qui</p>
            </div>
            <div class="list-left text-center no_marg wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0.3s">
                <span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
                <h4>Voluptatem</h4>
                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                    sed quia consequuntur magni dolores eos qui</p>
            </div>
            <div class="list-left text-center no_marg wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0.4s">
                <span class="glyphicon glyphicon-education" aria-hidden="true"></span>
                <h4>Voluptatem</h4>
                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                    sed quia consequuntur magni dolores eos qui</p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- //services -->



<!-- services -->
<div class="typrography">
    <div class="container">
        <div class="grid_3 grid_5 wow fadeInRight animated" data-wow-delay=".5s">

            <h3 class="bars">个人基本信息</h3>
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item"><a href="#">卡类型:</a></li>
                    <li class="list-group-item">卡号：</li>
                    <li class="list-group-item">身份证类别：</li>
                    <li class="list-group-item">身份证件类别：</li>
                    <li class="list-group-item">姓名：</li>
                    <li class="list-group-item">性别：</li>
                    <li class="list-group-item">年龄：</li>
                    <li class="list-group-item">出生日期：</li>
                    <li class="list-group-item">民族：</li>
                    <li class="list-group-item">联系人：</li>
                    <li class="list-group-item">联系人关系：</li>
                    <li class="list-group-item">婚姻状况：</li>
                    <li class="list-group-item">文化程度：</li>
                    <li class="list-group-item">联系号码：</li>
                    <li class="list-group-item">家庭住址：</li>
                    <li class="list-group-item">邮政编码：</li>
                    <li class="list-group-item">建档医疗机构组</br>
                                                   织机构名称：</li>
                    <li class="list-group-item">建档时间：</li>
                </ul>
            </div>
            <section>
                <p>Add borders and rounded corners to the table.</p>
                <div class="bs-docs-example">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td rowspan="2">1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@getbootstrap</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td colspan="2">Larry the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </section>


            <div class="clearfix"> </div>
        </div>
    </div>
</div>
<!-- //services -->
<script type="text/javascript" src="${ctxStatic}infirmary/js/bootstrap-3.1.1.min.js"></script>
</body>
</html>
